<template>
  <!--
  前端主应用组件
  作者: heruopu
  © 2025 Heruopu. All rights reserved.
  -->
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <!-- Logo和名称固定在左上角 -->
      <div class="logo-container">
        <img src="/logo.svg" alt="CaseMaker Logo" class="logo-image" />
        <span class="logo-text">CaseMaker</span>
      </div>
      
      <!-- 全局导航菜单 - 新的布局结构，确保所有菜单项都能显示 -->
      <nav class="main-nav">
        <div class="nav-items-container">
          <div 
            v-for="item in navItems" 
            :key="item.index"
            :class="['nav-item', { 'active': currentRoute === item.index }]"
            @click="handleNavSelect(item.index)"
          >
            {{ item.label }}
          </div>
        </div>
      </nav>
      
      <!-- 右侧区域 -->
      <div class="header-right">
          <!-- 通知图标 -->
          <el-tooltip content="通知消息" placement="bottom">
            <ElBadge :value="notifications" :max="99" class="notification-icon">
              <el-icon class="el-icon--right">
                <Bell />
            </el-icon>
          </ElBadge>
          </el-tooltip>
          
          <!-- 用户信息 -->
          <el-dropdown trigger="hover" @command="handleLogout" class="user-dropdown">
            <template #default>
              <div class="user-info" style="display: flex; align-items: center; cursor: pointer; padding: 0 12px;">
                <el-avatar :size="36" style="border: 2px solid #f0f2f5;">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span v-if="!collapsed" style="margin-left: 12px; font-weight: 500;">{{ username }}</span>
                <el-icon class="el-icon--right" v-if="!collapsed"><ArrowDown /></el-icon>
              </div>
            </template>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item icon="User">个人中心</el-dropdown-item>
                <el-dropdown-item icon="Setting">账户设置</el-dropdown-item>
                <el-dropdown-item divided />
                <el-dropdown-item command="logout" icon="Logout" type="danger">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
    </header>
    
    <!-- 页面内容 -->
    <main class="app-main">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElBadge, ElMessage } from 'element-plus';
import { User, Bell, ArrowDown } from '@element-plus/icons-vue';
import request from './utils/axios'

const router = useRouter();
const username = ref('测试用户');
const notifications = ref(3);
const collapsed = ref(false);
const currentRoute = ref('/');

// 导航菜单项数据
const navItems = [
  { index: '/', label: '首页' },
  { index: '/project', label: '项目' },
  { index: '/ai', label: 'AI生成' },
  { index: '/case', label: '用例' },
  { index: '/system', label: '系统' }
];

// 计算当前页面标题 - 暂时注释，如需使用可以取消注释
// const pageTitle = computed(() => {
//   const currentMatched = router.currentRoute.value.matched[router.currentRoute.value.matched.length - 1];
//   return currentMatched?.meta?.title || 'CaseMaker';
// });

// 初始化当前路由
const initializeCurrentRoute = () => {
  const path = router.currentRoute.value.path;
  if (path.startsWith('/project')) {
    currentRoute.value = '/project';
  } else if (path.startsWith('/ai')) {
    currentRoute.value = '/ai';
  } else if (path.startsWith('/case')) {
    currentRoute.value = '/case';
  } else if (path.startsWith('/system')) {
    currentRoute.value = '/system';
  } else {
    currentRoute.value = '/';
  }
};

// 监听路由变化，更新当前选中的导航项并输出日志
watch(() => router.currentRoute.value, (newRoute) => {
  console.log('路由变化:', newRoute);
  initializeCurrentRoute();
}, { immediate: true });

// 导航菜单选择事件处理
const handleNavSelect = (index: string) => {
  console.log('======= 导航选择开始 =======');
  console.log('尝试跳转到:', index);
  console.log('当前路由:', router.currentRoute.value.path);
  console.log('router对象是否存在:', !!router);
  console.log('router.push方法是否存在:', typeof router.push === 'function');
  
  currentRoute.value = index;
  try {
    const result = router.push(index);
    console.log('路由跳转命令已发送，结果:', result);
    console.log('跳转后路由:', router.currentRoute.value.path);
  } catch (error) {
    console.error('路由跳转失败:', error);
    console.error('错误详情:', JSON.stringify(error));
  }
  console.log('======= 导航选择结束 =======');
};

// 退出登录
const handleLogout = async () => {
  try {
    // 调用登出API
    await request.post('/api/auth/logout/');
    // 清空本地存储的用户信息
    localStorage.removeItem('userInfo');
    localStorage.removeItem('token');
    // 显示成功提示
    ElMessage.success('退出登录成功');
    // 跳转到首页
    router.push('/');
  } catch (error) {
    console.error('退出登录失败:', error);
    ElMessage.error('退出登录失败，请重试');
  }
};
</script>

<style scoped>
/* 整体布局优化 */
* {
  box-sizing: border-box;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  width: 100%;
}

/* 顶部导航栏 - 全新实现，不依赖Element Plus菜单组件 */
.app-header {
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 0 24px;
  height: 60px;
  z-index: 5;
  width: 100%;
  position: relative;
  overflow: visible;
  justify-content: center;
}

/* Logo和名称固定在左上角 */
.logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  left: 24px;
}

.logo-image {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
}

/* 导航菜单区域 - 完全自定义实现 */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: visible !important;
}

/* 导航项容器 - 确保不会被压缩 */
.nav-items-container {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  overflow: visible !important;
}

/* 导航项 - 完全自定义样式 */
.nav-item {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  font-size: 15px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  overflow: visible;
  text-overflow: clip;
}

.nav-item:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

.nav-item.active {
  color: #409EFF;
  border-bottom-color: #409EFF;
  background-color: #ecf5ff;
}

/* 右侧区域样式 */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: absolute;
  right: 24px;
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  flex-shrink: 0;
}

/* 面包屑优化 */
:deep(.el-breadcrumb) {
  font-size: 13px;
  color: #606266;
}

:deep(.el-breadcrumb__inner a) {
  color: #606266;
}

:deep(.el-breadcrumb__inner.is-link:hover) {
  color: #409EFF;
}

/* 全局搜索框优化 */
:deep(.global-search .el-input__wrapper) {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  box-shadow: none;
  transition: all 0.3s ease;
}

:deep(.global-search .el-input__wrapper:hover) {
  border-color: #409EFF;
  background-color: #fff;
}

:deep(.global-search .el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 通知图标优化 */
.notification-icon {
  cursor: pointer;
  padding: 8px;
  transition: all 0.3s ease;
  border-radius: 4px;
  color: #606266;
}

.notification-icon:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}

/* 用户下拉菜单优化 */
.user-dropdown {
  margin-left: 0;
}

.user-info {
  height: 40px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.user-info:hover {
  background-color: #f5f7fa;
}

:deep(.el-avatar) {
  border: 2px solid #f5f7fa;
  transition: all 0.3s ease;
}

.user-info:hover :deep(.el-avatar) {
  border-color: #409EFF;
}

/* 页面内容区域优化 */
.el-main {
  padding: 20px;
  background-color: #f5f7fa;
  flex: 1;
  overflow-y: auto;
}

.content-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 24px;
  min-height: calc(100vh - 120px);
}

/* 页面过渡效果优化 */
:deep(.router-view) {
  transition: all 0.3s ease;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
  .global-search {
    width: 180px !important;
  }
}

@media (max-width: 768px) {
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .global-search {
    display: none;
  }
  
  .content-container {
    padding: 16px;
  }
}
</style>
